<template>
  <div class="home">
    <!-- 轮播 -->
    <div class="swipebox">
      <Swipebox :data="swipes" />
    </div>
    <!-- 分类导航 -->
    <GenreNav :data="genre" />
    <!-- 热门商品 -->
    <Hot :data="hot" />
  </div>
</template>

<script>
// @ is an alias to /src
import Swipebox from "@/components/swipebox.vue";
import GenreNav from "./home/genrenav.vue";
import Hot from "./home/hot.vue";
import { homeApi } from "../api";
export default {
  name: "home",
  data() {
    return {
      genre: {},
      hot: {},
      swipes: {}
    };
  },
  components: { Swipebox, GenreNav, Hot },
  // 自动请求
  mounted() {
    homeApi().then(
      data => {
        this.genre = data.genre;
        this.hot = data.hot;
        this.swipes = data.swipes;
        // console.log(this.hot)
      },
      // eslint-disable-next-line no-unused-vars
      err => {
        alert("请求错误！");
      }
    );
  },
  // 从首页去往产品列表页前给下一个导航路由设置参数
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 让组件不缓存，重新加载
    next();
  }
};
</script>

<style scoped>
.swipebox {
  height: 200px;
  overflow: hidden;
}
</style>
